React Native এবং Firebase Integration

Firebase একটি প্ল্যাটফর্ম যা মোবাইল এবং ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য একটি বিস্তৃত স্যুট অফ সার্ভিস প্রোভাইড করে, যেমন Authentication, Real-time Database, Firestore, Push Notifications, Cloud Functions ইত্যাদি। React Native এর সাথে Firebase ইন্টিগ্রেট করা খুবই সাধারণ এবং এটি মোবাইল অ্যাপ্লিকেশনের জন্য অনেক সুবিধা প্রদান করে।

React Native এ Firebase ইন্টিগ্রেশন করার জন্য আপনি Firebase SDK ব্যবহার করবেন এবং একাধিক Firebase পরিষেবার সাথে কাজ করতে পারবেন। Firebase ও React Native এর মধ্যে ইন্টিগ্রেশন বেশ সরল, এবং এটি দ্রুত উন্নত অ্যাপ তৈরি করার জন্য একটি শক্তিশালী সমাধান।

Firebase Setup for React Native

Firebase React Native ইন্টিগ্রেশন শুরু করার জন্য, আপনাকে প্রথমে Firebase প্রজেক্ট সেটআপ করতে হবে এবং তারপরে React Native অ্যাপে Firebase SDK ইনস্টল এবং কনফিগার করতে হবে।

১. Firebase Console এ প্রজেক্ট তৈরি করা

1. Firebase Console (https://console.firebase.google.com) এ যান এবং একটি নতুন প্রজেক্ট তৈরি করুন।
2. প্রজেক্ট তৈরি করার পর, আপনার iOS এবং Android অ্যাপ্লিকেশন অ্যাড করুন:
   • iOS: আপনার অ্যাপের bundle ID সেট করুন এবং Firebase এর নির্দেশিকা অনুসরণ করুন।
   • Android: আপনার Android অ্যাপের package name দিন এবং Firebase এর নির্দেশিকা অনুসরণ করুন।

২. Firebase SDK ইনস্টল করা

React Native অ্যাপে Firebase ব্যবহার করতে, আপনি Firebase এর জন্য React Native SDK ইনস্টল করতে হবে। Firebase এর জন্য React Native SDK এর জন্য React Native Firebase লাইব্রেরি ব্যবহৃত হয়, যা Firebase এর অনেক পরিষেবা সমর্থন করে।

1. React Native Firebase ইনস্টল করুন:

npm install @react-native-firebase/app

এছাড়াও, আপনার যদি Firestore, Authentication বা অন্য কোনো Firebase পরিষেবা ব্যবহার করতে চান, তাহলে আপনাকে তাদের জন্য আলাদা প্যাকেজ ইনস্টল করতে হবে।

যেমন:

npm install @react-native-firebase/auth  # Authentication
npm install @react-native-firebase/firestore  # Firestore
npm install @react-native-firebase/database  # Realtime Database

2. iOS Setup (যদি আপনি iOS ডিভাইসে Firebase ব্যবহার করতে চান):

cd ios/
pod install

৩. Firebase কনফিগারেশন

Firebase কনফিগারেশন এবং কনফিগারেশন ফাইলগুলো আপনার React Native অ্যাপের মধ্যে সেটআপ করতে হবে। আপনি Firebase Console থেকে আপনার অ্যাপের জন্য google-services.json (Android) এবং GoogleService-Info.plist (iOS) ফাইল ডাউনলোড করবেন এবং সেগুলি যথাযথ স্থানে রাখবেন।

• Android: android/app/ ডিরেক্টরিতে google-services.json ফাইলটি রাখুন।
• iOS: Xcode এ GoogleService-Info.plist ফাইলটি যোগ করুন।

৪. Firebase Authentication Example

React Native অ্যাপে Firebase Authentication ব্যবহারের জন্য একটি সহজ উদাহরণ দেখানো হলো, যেখানে ব্যবহারকারী ইমেইল ও পাসওয়ার্ড দিয়ে লগইন করবে:

Step 1: Firebase Authentication SDK ইনস্টল করুন

npm install @react-native-firebase/auth

Step 2: Firebase Authentication ব্যবহার করা

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import auth from '@react-native-firebase/auth';

const FirebaseAuthExample = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [user, setUser] = useState(null);

  const handleLogin = () => {
    auth()
      .signInWithEmailAndPassword(email, password)
      .then((response) => {
        console.log('User logged in!', response.user);
        setUser(response.user);
      })
      .catch((error) => {
        console.error('Login Error', error);
      });
  };

  return (
    <View>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
      <Button title="Login" onPress={handleLogin} />
      {user && <Text>Welcome {user.email}</Text>}
    </View>
  );
};

export default FirebaseAuthExample;

এখানে ব্যবহারকারী email এবং password দিয়ে লগইন করতে পারেন। Firebase Authentication এর মাধ্যমে সাইন ইন করার পর ব্যবহারকারীর তথ্য স্টেটে সংরক্ষিত হয়।

৫. Firebase Firestore ব্যবহার

Firestore হলো Firebase এর একটি ডকুমেন্ট-ভিত্তিক NoSQL ডাটাবেস। এটি ডেটা স্টোর এবং রিয়েলটাইম ডেটা সিঙ্ক্রোনাইজেশন সমর্থন করে।

Step 1: Firestore SDK ইনস্টল করুন

npm install @react-native-firebase/firestore

Step 2: Firestore ডেটা ফেচ এবং আপডেট করা

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import firestore from '@react-native-firebase/firestore';

const FirestoreExample = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Firestore থেকে ডেটা ফেচ করা
    firestore()
      .collection('Users')
      .doc('user-id')  // সংশ্লিষ্ট ডকুমেন্টের আইডি
      .get()
      .then(documentSnapshot => {
        if (documentSnapshot.exists) {
          setData(documentSnapshot.data());
        }
      });
  }, []);

  const handleSaveData = () => {
    firestore()
      .collection('Users')
      .doc('user-id')  // সংশ্লিষ্ট ডকুমেন্টের আইডি
      .set({
        name: 'John Doe',
        age: 30,
      })
      .then(() => {
        console.log('User data saved!');
      });
  };

  return (
    <View>
      {data ? (
        <Text>Name: {data.name}</Text>
      ) : (
        <Text>Loading data...</Text>
      )}
      <Button title="Save Data" onPress={handleSaveData} />
    </View>
  );
};

export default FirestoreExample;

এখানে আমরা Firestore থেকে ডেটা ফেচ করছি এবং তা UI তে দেখাচ্ছি। এছাড়া, আমরা একটি বাটন ক্লিক করলে Firestore এ নতুন ডেটা সেভ করতে পারি।

৬. Firebase Realtime Database ব্যবহার

Firebase Realtime Database ডেটা সিঙ্ক্রোনাইজেশনের জন্য ব্যবহৃত হয়। এটি একটি ক্লাউড হোস্টেড ডাটাবেস যা ডেটা রিয়েল টাইমে সিঙ্ক্রোনাইজ করে।

Step 1: Realtime Database SDK ইনস্টল করুন

npm install @react-native-firebase/database

Step 2: Realtime Database ডেটা ফেচ এবং আপডেট করা

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import database from '@react-native-firebase/database';

const RealtimeDatabaseExample = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const onValueChange = database()
      .ref('/users/user-id')  // রেফারেন্সের পথ
      .on('value', snapshot => {
        setData(snapshot.val());  // ডেটা স্টেটে সেট করা
      });

    return () => database().ref('/users/user-id').off('value', onValueChange);  // Cleanup
  }, []);

  const handleSaveData = () => {
    database()
      .ref('/users/user-id')
      .set({
        name: 'Jane Doe',
        age: 25,
      })
      .then(() => console.log('Data saved.'));
  };

  return (
    <View>
      {data ? (
        <Text>Name: {data.name}</Text>
      ) : (
        <Text>Loading...</Text>
      )}
      <Button title="Save Data" onPress={handleSaveData} />
    </View>
  );
};

export default RealtimeDatabaseExample;

এখানে Firebase Realtime Database ব্যবহার করে আমরা ডেটা সিঙ্ক্রোনাইজ এবং সেটিং এর উদাহরণ দেখেছি।

সারাংশ

Firebase React Native অ্যাপে ইন্টিগ্রেট করার মাধ্যমে আপনি বিভিন্ন পরিষেবা যেমন Authentication, Firestore, Realtime Database ইত্যাদি ব্যবহার করতে পারেন। Firebase এর সাহায্যে অ্যাপ্লিকেশন ডেভেলপমেন্ট আরও দ্রুত এবং কার্যকরী হয়ে ওঠে। Firebase SDK ইনস্টল এবং কনফিগার করার পর, আপনি Firebase-এর বিভিন্ন ফিচার ব্যবহার করতে পারবেন এবং ব্যবহারকারী ডেটা সংরক্ষণ ও সিঙ্ক্রোনাইজ করতে পারবেন।

Firebase Authentication একটি শক্তিশালী সেবা যা ব্যবহারকারীদের লগইন এবং সাইন-আপ পরিচালনা করার জন্য সহজ পদ্ধতি প্রদান করে। এটি বিভিন্ন ধরনের লগইন পদ্ধতি সমর্থন করে, যেমন ইমেইল-পাসওয়ার্ড, গুগল, ফেসবুক, টুইটার, এবং আরও অনেক কিছু।

এখানে Firebase Authentication দিয়ে User Login এবং Sign-Up তৈরি করার একটি সঠিক উদাহরণ দেখানো হলো।

প্রথমে Firebase প্রকল্প তৈরি করুন:

1. Firebase Console এ যান: Firebase Console
2. একটি নতুন প্রকল্প তৈরি করুন বা পূর্বে তৈরি প্রকল্পে যান।
3. Authentication সেকশনে যান এবং Email/Password সাইন-ইন মেথডটি সক্রিয় করুন।

React এ Firebase Authentication ব্যবহার করার জন্য সেটআপ:

1. প্রথমে Firebase SDK ইনস্টল করুন:

npm install firebase

2. Firebase কনফিগারেশন সেটআপ করুন (Firebase Console থেকে পাওয়া কনফিগারেশন কোড ব্যবহার করুন):

// firebase-config.js

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-sender-id",
  appId: "your-app-id"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

const auth = getAuth(app);

export { auth };

User Sign-Up (Registration):

// SignUp.js
import React, { useState } from 'react';
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { auth } from './firebase-config';

function SignUp() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      await createUserWithEmailAndPassword(auth, email, password);
      alert("User Registered Successfully!");
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    <div>
      <h2>Sign Up</h2>
      <form onSubmit={handleSignUp}>
        <input 
          type="email" 
          placeholder="Email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
        />
        <input 
          type="password" 
          placeholder="Password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
        />
        <button type="submit">Sign Up</button>
      </form>
      {error && <p>{error}</p>}
    </div>
  );
}

export default SignUp;

User Login (Authentication):

// Login.js
import React, { useState } from 'react';
import { signInWithEmailAndPassword } from 'firebase/auth';
import { auth } from './firebase-config';

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await signInWithEmailAndPassword(auth, email, password);
      alert("User Logged In Successfully!");
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    <div>
      <h2>Login</h2>
      <form onSubmit={handleLogin}>
        <input 
          type="email" 
          placeholder="Email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
        />
        <input 
          type="password" 
          placeholder="Password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
        />
        <button type="submit">Login</button>
      </form>
      {error && <p>{error}</p>}
    </div>
  );
}

export default Login;

Firebase Authentication দিয়ে ডেটা রিট্রিভ করা (Logged-in User):

// UserProfile.js
import React, { useState, useEffect } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from './firebase-config';

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    onAuthStateChanged(auth, (currentUser) => {
      if (currentUser) {
        setUser(currentUser);
      } else {
        setUser(null);
      }
    });
  }, []);

  return (
    <div>
      {user ? (
        <div>
          <h3>Welcome, {user.email}</h3>
          <p>User ID: {user.uid}</p>
        </div>
      ) : (
        <h3>Please log in to see the profile</h3>
      )}
    </div>
  );
}

export default UserProfile;

সারাংশ:

1. Firebase Authentication সেটআপ করতে Firebase কনসোল থেকে প্রজেক্ট তৈরি করে, Firebase SDK ব্যবহার করতে হয়।
2. Sign Up এবং Login পেজে ইমেইল-পাসওয়ার্ড ব্যবহার করে ব্যবহারকারীকে নিবন্ধন এবং লগইন করার জন্য createUserWithEmailAndPassword এবং signInWithEmailAndPassword ফাংশন ব্যবহৃত হয়।
3. UserProfile পেজে ব্যবহারকারীর তথ্য দেখতে onAuthStateChanged ফাংশন ব্যবহার করা হয়, যা ব্যবহারকারীর লগইন বা লগআউট স্টেট ট্র্যাক করে।

এই পদ্ধতিতে আপনি Firebase Authentication দিয়ে ব্যবহারকারীর সাইন-আপ এবং লগইন ফিচার সহজেই তৈরি করতে পারবেন।

Firebase হল Google এর একটি প্ল্যাটফর্ম যা মোবাইল এবং ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য বিভিন্ন ধরনের সেবা প্রদান করে। এর মধ্যে Realtime Database এবং Firestore হল দুটি প্রধান ডেটাবেস পরিষেবা, যা ডেভেলপারদের রিয়েল-টাইম ডেটা সিঙ্ক্রোনাইজেশন, স্টোরেজ এবং ম্যানেজমেন্ট করার সুযোগ দেয়।

এই দুটি ডেটাবেসের মধ্যে কিছু পার্থক্য রয়েছে, এবং প্রতিটির নিজস্ব সুবিধা এবং ব্যবহার ক্ষেত্র রয়েছে। নিচে তাদের বিস্তারিত ব্যবহার এবং পার্থক্য আলোচনা করা হল।

১. Firebase Realtime Database

Firebase Realtime Database হল একটি NoSQL ডেটাবেস যা ক্লাউডে রাখা হয় এবং এটি রিয়েল-টাইম ডেটা সিঙ্ক্রোনাইজেশন প্রদান করে। এই ডেটাবেসটি ডেটা JSON ফরম্যাটে স্টোর করে এবং ক্লায়েন্টদের মধ্যে ডেটা সিঙ্ক্রোনাইজেশন খুব দ্রুত ঘটে।

ব্যবহার ক্ষেত্র:

• রিয়েল-টাইম অ্যাপ্লিকেশন: Firebase Realtime Database ব্যবহার করে খুব দ্রুত রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করা যায়, যেমন চ্যাট অ্যাপ্লিকেশন, লাইভ ফিড, গেমের স্কোর ট্র্যাকিং ইত্যাদি।
• কনস্ট্যান্ট ডেটা আপডেট: যখন ডেটা স্টোর বা পরিবর্তিত হয়, তখন তা রিয়েল-টাইমে ক্লায়েন্টদের মধ্যে আপডেট হয়ে যায়।
• কমপ্লেক্স স্ট্রাকচার: ছোট এবং সাধারণ ডেটা স্টোরেজের জন্য এটি বেশ উপযুক্ত, কিন্তু খুব বড় ডেটাবেস স্ট্রাকচার বা কমপ্লেক্স কুয়েরির জন্য সীমাবদ্ধ।

উদাহরণ: Realtime Database ব্যবহার

import { getDatabase, ref, set } from "firebase/database";

// Realtime Database ইনস্ট্যান্স তৈরি
const database = getDatabase();

// ডেটা সেট করা
const writeUserData = (userId, name, email, imageUrl) => {
  set(ref(database, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });
};

• এখানে, set() ব্যবহার করে আমরা Realtime Database-এ ডেটা লিখছি।

২. Firebase Firestore

Firebase Firestore হল Firebase-এর আরও আধুনিক ডেটাবেস সিস্টেম যা Cloud Firestore নামে পরিচিত। এটি ডকুমেন্ট-ভিত্তিক ডেটাবেস এবং NoSQL আর্কিটেকচারের উপর ভিত্তি করে তৈরি। Firestore বেশ স্কেলেবল, এফিশিয়েন্ট এবং ফ্লেক্সিবল, এবং ডেটার উপর কুয়েরি এবং ফিল্টার করা অনেক সহজ।

ব্যবহার ক্ষেত্র:

• বড় অ্যাপ্লিকেশন এবং ডেটাবেস: Firestore বড় আকারের অ্যাপ্লিকেশন এবং ডেটাবেস পরিচালনা করার জন্য উপযুক্ত। এতে সহজে ডেটা আপডেট, অনুসন্ধান এবং কুয়েরি করা যায়।
• অ্যাডভান্সড কুয়েরি অপশন: Firestore রিলেটেড কুয়েরি করতে সহায়ক যেমন ফিল্টার, সোর্টিং, লিমিট ইত্যাদি।
• অফলাইন সাপোর্ট: Firestore অফলাইনে ডেটা সিঙ্ক্রোনাইজেশনের জন্য ভাল সমর্থন প্রদান করে।
• বড় ডেটা স্টোরেজ: বড় আকারের ডেটা, যেমন ছবির URL, ডকুমেন্ট বা অন্যান্য মিডিয়া ফাইল সহজেই স্টোর করা যায়।

উদাহরণ: Firestore ব্যবহার

import { getFirestore, collection, addDoc } from "firebase/firestore"; 

// Firestore ইনস্ট্যান্স তৈরি
const db = getFirestore();

// Firestore এ ডেটা অ্যাড করা
const addUser = async () => {
  try {
    const docRef = await addDoc(collection(db, "users"), {
      first: "Ada",
      last: "Lovelace",
      born: 1815
    });
    console.log("Document written with ID: ", docRef.id);
  } catch (e) {
    console.error("Error adding document: ", e);
  }
};

• এখানে, addDoc() ফাংশনটি Firestore-এ একটি নতুন ডকুমেন্ট অ্যাড করার জন্য ব্যবহৃত হয়।

৩. Firebase Realtime Database এবং Firestore এর মধ্যে পার্থক্য

৪. কোনটি ব্যবহার করবেন?

• Realtime Database ব্যবহার করুন যদি আপনার অ্যাপ্লিকেশন দ্রুত এবং রিয়েল-টাইম ডেটা সিঙ্ক্রোনাইজেশন প্রয়োজন, যেমন একটি চ্যাট অ্যাপ বা লাইভ ট্র্যাকিং অ্যাপ। তবে এটি ছোট এবং সোজা ডেটা স্ট্রাকচারের জন্য ভালো।
• Firestore ব্যবহার করুন যদি আপনার অ্যাপ্লিকেশন বড় ডেটাবেস পরিচালনা করতে চায়, যেমন বড় রিটেইল বা সোশ্যাল মিডিয়া অ্যাপ্লিকেশন। Firestore-এর অগ্রাধিকার রয়েছে স্কেলেবিলিটি, উন্নত কুয়েরি এবং অফলাইন সাপোর্ট।

সারাংশ

Firebase Realtime Database এবং Firestore দুটি আলাদা ডেটাবেস সিস্টেম, যেখানে Firebase Realtime Database সাধারণত রিয়েল-টাইম ডেটা সিঙ্ক্রোনাইজেশনের জন্য ব্যবহার হয় এবং Firestore বড় এবং স্কেলেবল ডেটাবেস সিস্টেমের জন্য উপযুক্ত। Firestore অ্যাডভান্সড কুয়েরি অপশন, অফলাইন সাপোর্ট এবং বড় ডেটা স্টোরেজের জন্য বেশ শক্তিশালী।

Firebase Cloud Messaging (FCM) হলো Google এর একটি পরিষেবা যা ডেভেলপারদের তাদের মোবাইল অ্যাপ্লিকেশন বা ওয়েব অ্যাপ্লিকেশনকে পুশ নোটিফিকেশন পাঠানোর সুবিধা প্রদান করে। এটি মোবাইল অ্যাপ্লিকেশন এবং ওয়েব ব্রাউজারদের মধ্যে রিয়েল-টাইম নোটিফিকেশন পাঠানোর জন্য ব্যবহৃত হয়। FCM এর মাধ্যমে, ডেভেলপাররা ডিভাইসে নোটিফিকেশন পাঠাতে পারেন, এমনকি অ্যাপ্লিকেশনটি ব্যাকগ্রাউন্ড বা বন্ধ অবস্থায় থাকলেও।

FCM দিয়ে Push Notification পাঠানোর প্রক্রিয়া

১. Firebase Project তৈরি করা

1. Firebase Console এ যান: Firebase Console.
2. একটি নতুন প্রকল্প (Project) তৈরি করুন বা পূর্ববর্তী প্রকল্পটি নির্বাচন করুন।
3. "Cloud Messaging" সেকশন খুঁজে নিন এবং Firebase Cloud Messaging এ ক্লিক করুন।
4. এখানে, আপনার অ্যাপের Server Key এবং Sender ID পাবেন। এগুলি আপনার API রিকোয়েস্টে ব্যবহার করা হবে।

২. React Native অ্যাপে Firebase Integration

Firebase Cloud Messaging (FCM) ব্যবহার করতে, প্রথমে React Native অ্যাপে Firebase সেটআপ করতে হবে। React Native Firebase লাইব্রেরি ব্যবহার করে Firebase পরিষেবা সমূহ যুক্ত করা যায়।

১. React Native Firebase Install করা

প্রথমে, @react-native-firebase লাইব্রেরিটি ইনস্টল করতে হবে।

npm install @react-native-firebase/app @react-native-firebase/messaging

এছাড়া, Firebase সেটআপের জন্য আপনার Android এবং iOS প্রজেক্টে কিছু কনফিগারেশন করতে হবে।

২. Firebase Console এ অ্যাপ রেজিস্টার করা

Firebase Console থেকে অ্যাপের জন্য google-services.json (Android) অথবা GoogleService-Info.plist (iOS) ডাউনলোড করুন এবং যথাযথ ডিরেক্টরিতে কপি করুন।

• Android: android/app/ ডিরেক্টরিতে google-services.json ফাইলটি রাখতে হবে।
• iOS: Xcode প্রজেক্টে GoogleService-Info.plist ফাইলটি অন্তর্ভুক্ত করতে হবে।

৩. FCM সেটআপ এবং নোটিফিকেশন সাবস্ক্রাইব করা

Firebase সেটআপ সম্পূর্ণ করার পর, আপনি পুশ নোটিফিকেশন পাঠানোর জন্য এবং রিসিভ করার জন্য কোড লিখতে পারবেন। নিচে React Native অ্যাপে FCM সেটআপ করার উদাহরণ দেওয়া হলো।

১. FCM Permission চাওয়া

পুশ নোটিফিকেশন পাঠানোর আগে, প্রথমে ডিভাইসের অনুমতি নিতে হবে। Android এবং iOS এর জন্য আলাদা আলাদা কনফিগারেশন প্রয়োজন।

import messaging from '@react-native-firebase/messaging';

const requestUserPermission = async () => {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log('Notification permission granted!');
  } else {
    console.log('Notification permission denied');
  }
};

২. FCM Token সংগ্রহ করা

FCM সার্ভিসের মাধ্যমে আপনার অ্যাপ্লিকেশনকে একটি Unique Token দেওয়া হয় যা আপনার অ্যাপে পুশ নোটিফিকেশন পাঠানোর জন্য ব্যবহার হবে।

const getToken = async () => {
  const token = await messaging().getToken();
  console.log('FCM Token:', token);
};

৩. নোটিফিকেশন রিসিভ করা

আপনি যখন অ্যাপ্লিকেশনটি ব্যাকগ্রাউন্ডে বা ফরগ্রাউন্ডে থাকবেন, তখন পুশ নোটিফিকেশন রিসিভ করতে onMessage এবং onNotificationOpenedApp এর মতো হুক ব্যবহার করা যায়।

import { useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';

const App = () => {

  useEffect(() => {
    // When the app is in the background or closed, and a notification is clicked
    messaging().onNotificationOpenedApp(remoteMessage => {
      console.log('Notification caused app to open:', remoteMessage.notification);
    });

    // If the app is opened from a terminated state
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          console.log('Notification caused app to open from terminated state:', remoteMessage.notification);
        }
      });

    // Foreground notification handling
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      console.log('FCM message received: ', remoteMessage);
    });

    return unsubscribe; // Cleanup the listener when the component unmounts
  }, []);

  return (
    // Your component JSX
  );
};

৪. Push Notification পাঠানো

এখন FCM সার্ভারের মাধ্যমে পুশ নোটিফিকেশন পাঠানোর সময় Server Key ব্যবহার করা হবে যা Firebase Console থেকে পাওয়া যায়। আপনি Axios বা অন্যান্য HTTP ক্লায়েন্ট ব্যবহার করে API রিকোয়েস্ট করতে পারেন।

import axios from 'axios';

const sendPushNotification = async (token, message) => {
  const serverKey = 'YOUR_SERVER_KEY'; // Firebase Console থেকে প্রাপ্ত Server Key
  const url = 'https://fcm.googleapis.com/fcm/send';

  const notification = {
    to: token, // Device Token
    notification: {
      title: 'Hello',
      body: message,
    },
    priority: 'high',
  };

  try {
    await axios.post(url, notification, {
      headers: {
        'Authorization': `key=${serverKey}`,
        'Content-Type': 'application/json',
      },
    });
    console.log('Notification sent successfully');
  } catch (error) {
    console.error('Error sending notification:', error);
  }
};

এখানে token হলো ডিভাইসের FCM টোকেন এবং message হলো সেই বার্তা যা আপনি পাঠাতে চান। API রিকোয়েস্টে Server Key ব্যবহার করা হয় যা Firebase Console থেকে পাওয়া যায়।

৫. Notificatons Handling on Background

Firebase Cloud Messaging দ্বারা পাঠানো নোটিফিকেশনগুলি অ্যাপ্লিকেশন ব্যাকগ্রাউন্ডে থাকার সময় স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে। আপনি যদি নোটিফিকেশনটি কাস্টমাইজ করতে চান বা হালনাগাদ করতে চান, তবে onNotificationOpenedApp বা onMessage হুক ব্যবহার করতে হবে।

সারাংশ

Firebase Cloud Messaging (FCM) ব্যবহার করে আপনি React Native অ্যাপে পুশ নোটিফিকেশন পাঠাতে এবং গ্রহণ করতে পারবেন। এটি সহজভাবে মোবাইল অ্যাপ্লিকেশনগুলির মধ্যে রিয়েল-টাইম নোটিফিকেশন চালু করার জন্য একটি শক্তিশালী টুল। আপনি Firebase Console থেকে সার্ভার কীগুলি পাবেন এবং React Native Firebase লাইব্রেরি ব্যবহার করে অ্যাপের মধ্যে FCM সেটআপ করতে পারবেন। এর মাধ্যমে আপনি অ্যাপ্লিকেশনের ব্যাকগ্রাউন্ড এবং ফরগ্রাউন্ড উভয় অবস্থাতেই পুশ নোটিফিকেশন পাঠানোর এবং গ্রহণ করার সুবিধা পাবেন।

Firebase একটি Google এর প্ল্যাটফর্ম যা মোবাইল এবং ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্ট এবং ম্যানেজমেন্টের জন্য নানা ধরনের টুলস এবং সার্ভিস প্রদান করে। Firebase এর দুটি গুরুত্বপূর্ণ টুলস হলো Firebase Analytics এবং Firebase Crashlytics, যা অ্যাপ্লিকেশনের কার্যকারিতা এবং সমস্যা ট্র্যাক করার জন্য ব্যবহৃত হয়। এই দুটি টুল আপনার অ্যাপের পারফরম্যান্স মনিটরিং, ইউজার আচরণ ট্র্যাকিং, এবং বাগ/ক্র্যাশ শনাক্ত করতে সহায়ক।

1. Firebase Analytics

Firebase Analytics (অথবা Google Analytics for Firebase) একটি শক্তিশালী টুল যা আপনার অ্যাপের ব্যবহারকারীর আচরণ ট্র্যাক করতে সাহায্য করে। এটি আপনার অ্যাপের ইউজারদের একটিভিটি, ইন্টারঅ্যাকশন এবং কনভার্সন মেট্রিক্স ট্র্যাক করতে সক্ষম। Firebase Analytics বিভিন্ন ধরনের ইভেন্ট ট্র্যাক করতে পারে, যেমন অ্যাপ ইনস্টল, ইন-অ্যাপ ক্রিয়াকলাপ, পেইড কনভার্সন, এবং আরও অনেক কিছু।

Firebase Analytics এর সুবিধা:

1. ইউজার বিহেভিয়ার ট্র্যাকিং
   আপনি সহজে আপনার অ্যাপের ইউজারদের কীভাবে ইন্টারঅ্যাক্ট করছে তা ট্র্যাক করতে পারবেন, যেমন কোন পেজ ভিজিট করা হয়েছে, কোন ফিচার ব্যবহার করা হয়েছে, বা ইউজাররা কোন প্রোডাক্টে ক্লিক করেছে।
2. কাস্টম ইভেন্টস
   আপনি আপনার নিজের কাস্টম ইভেন্ট সেট করতে পারেন, যেমন যখন একটি নির্দিষ্ট প্রোডাক্ট কেনা হয় বা কোনো নির্দিষ্ট পেইজ ভিজিট করা হয়।
3. ইউজার ডেমোগ্রাফিকস
   Firebase Analytics ব্যবহারকারীর লোকেশন, ডিভাইসের টাইপ, ভাষা এবং অন্যান্য ডেমোগ্রাফিক তথ্য সংগ্রহ করতে পারে।
4. রিলেটেড পারফরম্যান্স ডেটা
   Firebase Analytics অন্যান্য Firebase টুলস, যেমন Firebase Crashlytics, Firebase Remote Config, এবং Firebase Performance Monitoring এর সাথে ইন্টিগ্রেট হতে পারে, যা একটি পুরোপুরি বাস্তব সময়ে অ্যাপ্লিকেশন মনিটরিং পরিবেশ তৈরি করে।

Firebase Analytics ইনস্টলেশন ও কনফিগারেশন:

1. Firebase Console এ আপনার প্রোজেক্ট খুলুন।
2. Firebase SDK এবং Firebase Analytics লাইব্রেরি আপনার অ্যাপে ইনস্টল করুন:

   • Android এর জন্য:

     implementation 'com.google.firebase:firebase-analytics'

   • iOS এর জন্য:

     pod 'Firebase/Analytics'

3. Firebase Analytics ট্র্যাকিং ইভেন্ট যুক্ত করা:

   // Example: Track user sign-up event
   FirebaseAnalytics.getInstance(context).logEvent("sign_up", null);

2. Firebase Crashlytics

Firebase Crashlytics হল একটি ফ্রেমওয়ার্ক যা আপনার অ্যাপ্লিকেশনে থাকা ক্র্যাশ এবং বাগ সনাক্ত করার জন্য ব্যবহৃত হয়। এটি অ্যাপ্লিকেশনের ক্র্যাশ ডিটেইল, স্ট্যাক ট্রেস, এবং অন্য গুরুত্বপূর্ণ ইনফরমেশন সরবরাহ করে, যাতে আপনি ত্রুটিগুলি দ্রুত সনাক্ত এবং ফিক্স করতে পারেন।

Firebase Crashlytics এর সুবিধা:

1. ক্র্যাশ রিপোর্টিং
   Firebase Crashlytics আপনার অ্যাপের যে কোনো ক্র্যাশ বা ব্যতিক্রমী অবস্থার জন্য রিপোর্ট তৈরি করে, যাতে আপনি বুঝতে পারেন কেন অ্যাপটি ক্র্যাশ করেছে এবং কোথায় সমস্যা হতে পারে।
2. স্ট্যাক ট্রেস
   এটি স্ট্যাক ট্রেস প্রদান করে, যা আপনাকে সমস্যার উৎস সনাক্ত করতে সহায়ক হয়। এই ট্রেসে সমস্ত ফাংশন কলের লিস্ট থাকবে, যার মাধ্যমে আপনি ক্র্যাশের আসল কারণ খুঁজে পেতে পারেন।
3. লাইভ ডাটা ও রিয়েল-টাইম ট্র্যাকিং
   আপনি রিয়েল-টাইমে ক্র্যাশ রিপোর্ট দেখতে পারবেন এবং এই ডেটা Firebase Console থেকে সরাসরি সংগ্রহ করতে পারবেন।
4. ফ্যাটাল এবং নন-ফ্যাটাল ক্র্যাশ
   Crashlytics শুধু ফ্যাটাল ক্র্যাশ ট্র্যাক করেই থেমে থাকে না, এটি নন-ফ্যাটাল বা অস্থায়ী সমস্যাও ট্র্যাক করে, যা পরে ফিক্স করা যায়।

Firebase Crashlytics ইনস্টলেশন ও কনফিগারেশন:

1. Firebase Console এ আপনার প্রোজেক্ট খুলুন।
2. Firebase SDK এবং Crashlytics লাইব্রেরি ইনস্টল করুন:

   • Android এর জন্য:

     implementation 'com.google.firebase:firebase-crashlytics'

   • iOS এর জন্য:

     pod 'Firebase/Crashlytics'

3. ক্র্যাশ রিপোর্ট স্ন্যাপশট:
   আপনি Crashlytics-এ একটি ক্র্যাশ রিপোর্টটি নোটিফাই করতে পারেন:

   FirebaseCrashlytics.getInstance().log("User crashed while signing in");

Firebase Analytics এবং Crashlytics একত্রে ব্যবহার

Firebase Analytics এবং Crashlytics একসাথে ব্যবহার করলে আপনি একটি পূর্ণাঙ্গ অ্যাপ মনিটরিং পরিবেশ তৈরি করতে পারেন। Analytics দ্বারা আপনি ব্যবহারকারীর আচরণ ট্র্যাক করতে পারবেন, এবং Crashlytics দ্বারা আপনি অ্যাপের ক্র্যাশ এবং বাগ রিপোর্ট পেতে পারবেন। এই দুটি টুল একসাথে আপনার অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সহায়ক।

উদাহরণ: Firebase Analytics এবং Crashlytics একত্রে ব্যবহার

import com.google.firebase.analytics.FirebaseAnalytics;
import com.google.firebase.crashlytics.FirebaseCrashlytics;

// Initialize Firebase Analytics
FirebaseAnalytics mFirebaseAnalytics = FirebaseAnalytics.getInstance(context);

// Log custom events
Bundle bundle = new Bundle();
bundle.putString("user_name", "John Doe");
mFirebaseAnalytics.logEvent("user_signup", bundle);

// Log crashes with Crashlytics
try {
    // Some code that may cause an error
    throw new Exception("User login error");
} catch (Exception e) {
    FirebaseCrashlytics.getInstance().log("Error occurred during user login");
    FirebaseCrashlytics.getInstance().recordException(e);
}

Firebase Analytics এবং Crashlytics এর একত্রে ব্যবহারের সুবিধা

1. ডেটা-ড্রিভেন ডিসিশন: Analytics দ্বারা আপনি আপনার ইউজারের আচরণ এবং ব্যবহার বুঝতে পারবেন, এবং Crashlytics দ্বারা আপনি অ্যাপের ত্রুটি শনাক্ত করতে পারবেন।
2. ক্র্যাশগুলির কার্যকর সমাধান: Analytics এবং Crashlytics এর একত্রিত ফলাফল ব্যবহার করে আপনি ক্র্যাশের প্যাটার্ন চিহ্নিত করতে পারবেন এবং দ্রুত সমাধান করতে পারবেন।
3. উন্নত ইউজার এক্সপিরিয়েন্স: ইউজারদের কীভাবে অ্যাপটি ব্যবহার করছে, কীভাবে তারা সমস্যা সম্মুখীন হচ্ছে এবং কোথায় উন্নতি প্রয়োজন, তা বুঝতে পারবেন।

সারাংশ

Firebase Analytics এবং Firebase Crashlytics দুটি শক্তিশালী টুল যা মোবাইল অ্যাপ্লিকেশনের মন্টিরিং এবং পারফরম্যান্স অ্যানালাইসিস করতে সাহায্য করে। Firebase Analytics অ্যাপের ইউজার বিহেভিয়র ট্র্যাক করতে সাহায্য করে এবং Firebase Crashlytics অ্যাপের ক্র্যাশ এবং বাগ মনিটর করে। এগুলি একসাথে ব্যবহার করার মাধ্যমে আপনি একটি পূর্ণাঙ্গ অ্যাপ মনিটরিং সিস্টেম তৈরি করতে পারেন।